<template>
	<div class="searchDiv" ref="searchBox">
		<div class="searchTitle">
			<img src="../assets/images/png/logo3.png" class="logo" alt="搜索偏好">
		</div>
		<div class="searchContainer" id="inputDiv">
			<div class="inputDiv">
				<input type="text" v-model="searchContent" name="text" class="input" id="input" ref="myInput"
							 @input="searchRecommend"
							 @focus="handleFocus"
							 @blur="handleBlur"
							 @keyup.enter="search">

				<div class="border"></div>

				<button class="micButton">
					<a-dropdown :getPopupContainer="() => $refs.searchBox">
						<a class="ant-dropdown-link" @click.prevent>
							<img :src="$resolveAssetsUrl(`images/svg/${searchPreference}.svg`)" class="search_logo" alt="搜索偏好">
						</a>
						<template #overlay>
							<a-menu>
								<a-menu-item v-on:click="switchSearchType('baidu')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/baidu.svg" class="search_logo_baidu_mini">
										<span>百度</span>
									</a>
								</a-menu-item>
								<a-menu-item v-on:click="switchSearchType('biying')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/biying.svg" class="search_logo_biying_mini">
										<span>必应</span>
									</a>
								</a-menu-item>
								<a-menu-item v-on:click="switchSearchType('google')">
									<a href="javascript:;" class="line_center">
										<img src="../assets/images/svg/google.svg" class="search_logo_google_mini">
										<span>谷歌</span>
									</a>
								</a-menu-item>
							</a-menu>
						</template>
					</a-dropdown>
				</button>
			</div>

			<div class="recommendContainer" v-show="recommendShow">
				<div class="line"/>
				<a-menu v-for="(recommend, index) in recommendData" :selectedKeys="[selectIndex]">
					<a-menu-item :key="index" @mouseenter="selectSearchIndex(index)" v-on:click="clickSearchIndex(index)">
						<span v-html="'[收藏] ' + recommend.searchName" v-if="recommend.type ==='bookmark'" />
						<span v-html="'[书签] ' + recommend.searchName" v-else-if="recommend.type ==='browserBookmark'" />
						<span v-html="recommend.name" v-else/>
					</a-menu-item>
				</a-menu>
<!--				<a-menu v-for="(baiduRecommend, index) in recommendData.hotSearch" :selectedKeys="[selectIndex]">-->
<!--					<a-menu-item :key="index" @mouseenter="selectSearchIndex(index)" v-on:click="clickSearchIndex(index)">{{baiduRecommend}}</a-menu-item>-->
<!--				</a-menu>-->
			</div>
		</div>

		<div class="toolsContainer">
			<a-tabs default-active-key="1">
				<a-tab-pane key="1" tab="收藏夹" force-render>
					<div class="page_data_tools" @dragstart="dragstartBookmarkTitleDrag" @dragenter="dragenterBookmarkTitleDrag" @dragend="dragendBookmarkTitleDrag" @dragover="dragoverBookmarkTitleDrag">
						<div v-for="(bookmark, index) in bookmarkData" :class="bookmarkPage === index ? 'page_data_tools_item_select': 'page_data_tools_item' "
								 @click="clickBookmarkPage(index)"
								 draggable="true">
							{{bookmark.name}}
						</div>
					</div>
					<div class="tools_container_books">
						<div v-for="(bookmark, index) in bookmarkData[bookmarkPage].group" style="margin-bottom: 10px;">
							<div class="bookmark_item_title">
								{{bookmark.name}}
							</div>

							<div v-for="(bookmarkItem, index) in bookmark.list" class="bookmark_item_content">
								<a :href="bookmarkItem.url" style="color: black;">{{bookmarkItem.name}}</a>
							</div>
						</div>
					</div>
<!--					<div class="page_data_tools_add">-->
<!--						+-->
<!--					</div>-->
				</a-tab-pane>
				<a-tab-pane key="2" tab="工具集">
					<div class="tools_container_tools">
						<div class="tools_view">
							<img :src="$resolveAssetsUrl(`images/svg/FileTransfer.svg`)" class="tools_logo" alt="文件传输">
							<div>文件快传</div>
						</div>
						<div class="tools_view">
							<img :src="$resolveAssetsUrl(`images/svg/Translation.svg`)" class="tools_logo" alt="翻译">
							<div>语言翻译</div>
						</div>
						<div class="tools_view">
							<img :src="$resolveAssetsUrl(`images/svg/chatGPT.svg`)" class="tools_logo" alt="智能问答">
							<div>智能问答</div>
						</div>
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>

	</div>
</template>

<script>

import recommendService from '@/service/recommendService.js';

export default {
	data() {
		return {
			searchPreference: 'baidu',
			recommendShow: false,
			searchContent: '',
			recommendData: [],
			selectIndex: null,
			bookmarkPage: 0,
			bookmarkTitleDragNode: null,
			bookmarkData: [{"group":[{"list":[{"name":"测试区","url":"https://kcf-test.apps.digiwincloud.com.cn/login"},{"name":"生产区(华为)","url":"https://kcf.apps.digiwincloud.com.cn/"}],"name":"各区网站"},{"list":[{"name":"冲刺表","url":"https://docs.qq.com/sheet/DSlNEUE1NTUxBQWNt?tab=cjh33q"},{"name":"PB表","url":"https://docs.qq.com/sheet/DWFVNZmNreWFjRGZy?tab=BB08J2"},{"name":"高保真","url":"https://www.figma.com/file/PcbIWAUDCNcKbOnmRWgKjq/%E7%9F%A5%E8%AF%86%E4%B8%AD%E5%8F%B0--2.0?type=design&node-id=1065-266204&mode=design&t=czDlY0FhfJzf9cap-0"},{"name":"原型图*","url":"https://modao.cc/app/pxsbvDyps0ipel18DkCO9d"},{"name":"原型图(旧)","url":"https://modao.cc/app/C3Aof3zZrx9fm4h0KFcgX"},{"name":"高保真(旧)","url":"https://www.figma.com/file/ce7rEIOSqsSqapgphB18sF/%E7%9F%A5%E8%AF%86%E4%B8%AD%E5%8F%B0?type=design&node-id=1881-30826&mode=design&t=67qDNWwSVe42lBnY-0"}],"name":"迭代资料"}],"name":"KCF"},{"group":[{"list":[{"name":"开发区","url":"https://dashboard-test.digiwincloud.com.cn/#!/overview?namespace=default"},{"name":"测试区","url":"https://dashboard-hw-test.digiwincloud.com.cn/#/login"},{"name":"正式区(华为)","url":"https://dashboard-hw.digiwincloud.com.cn/#/login"},{"name":"正式区(微软)","url":"https://dashboard.digiwincloud.com/#/login"}],"name":"Kubernetes"},{"list":[{"name":"华为区","url":"https://jms-hw.digiwincloud.com.cn/luna/?_=1700720560591"}],"name":"堡垒机"},{"list":[{"name":"开发区","url":"https://archery.digiwincloud.com.cn/login/"},{"name":"华为区","url":"https://archery-hw.digiwincloud.com.cn/login/"},{"name":"微软区","url":"https://archery.digiwincloud.com/login/"}],"name":"数据库"},{"list":[{"name":"DroneCI","url":"http://172.16.101.224:22690/"},{"name":"DevOps","url":"https://ops.digiwincloud.com.cn/"},{"name":"配置仓库","url":"https://gitlab.digiwincloud.com.cn/users/sign_in"},{"name":"Maven仓库","url":"https://repo.digiwincloud.com.cn/maven/#browse/upload:ksc-release"},{"name":"镜像仓库","url":"https://registry.digiwincloud.com.cn/harbor/sign-in?redirect_url=%2Fharbor%2Fprojects"}],"name":"服务发布"},{"list":[{"name":"测试区","url":"https://console-test.digiwincloud.com.cn"},{"name":"生产区(华为)","url":"https://console.digiwincloud.com.cn"},{"name":"生产区(微软)","url":"https://console.digiwincloud.com/"}],"name":"鼎捷云"}],"name":"运维"},{"group":[{"list":[{"name":"需求迭代","url":"https://docs.qq.com/sheet/DR2hJdlBhRkNzeWhE?tab=3l32yo"}],"name":"迭代文档"}],"name":"KBS"},{"group":[{"list":[{"name":"测试区","url":"https://athena-test.digiwincloud.com.cn/login"},{"name":"正式区(华为)","url":"https://athena.digiwincloud.com.cn/login"}],"name":"各区网站"},{"list":[{"name":"需求单","url":"https://docs.qq.com/sheet/DVGpxUGx3UXZNS0NX?tab=8rqrhk"},{"name":"原型图","url":"https://modao.cc/app/UVhGNbrrjl17TxIVk2Y#screen=slfcc8tskabnly8"}],"name":"迭代资料"},{"list":[{"name":"服务编排","url":"https://sc-console-test.digiwincloud.com.cn/#/domains/athena/workflows"},{"name":"引擎汇总","url":"http://172.16.2.230/"},{"name":"页面标签","url":"https://www.kdocs.cn/l/cvTa8iU97BLm"}],"name":"流程引擎"}],"name":"FRC"},{"group":[{"list":[{"name":"需求单","url":"https://docs.qq.com/sheet/DR3Bwc0JBT0Z3eXJt?tab=BB08J2"},{"name":"问题单","url":"https://docs.qq.com/sheet/DSFFHeFhjcG14RHVz?tab=4o9o82&friendUin=qzgcGebP6huhA5SvHrWy4w%253D%253D&tdsourcetag=s_macqq_aiomsg"}],"name":"迭代文档"}],"name":"KSC"},{"group":[{"list":[{"name":"PLM(华为测试区)","url":"http://172.16.100.107:8080/plmweb"}],"name":"网站"},{"list":[{"name":"文档","url":"http://172.16.2.141:22694/html/web/controller/public/public.html#5e71d8f8e76767446b4c2805"},{"name":"学习网站","url":"http://221.6.15.182:8608/EFLearning"},{"name":"中间件","url":"http://172.16.2.141/"},{"name":"DMC","url":"http://172.16.2.141:22694/html/web/controller/public/public.html#5bbc58f58833b812036003db"}],"name":"中间件"},{"list":[{"name":"禅道","url":"https://athena-devops-zentao.digiwincloud.com.cn/user-login-L215LXRvZG8tYWxsLmh0bWw=.html"},{"name":"GP系统","url":"http://efgpcn.digiwin.com/NaNaWeb"}],"name":"公司"}],"name":"其他"},{"group":[{"list":[{"name":"自由鲸","url":"https://www.freewhale.us/"},{"name":"电脑壁纸","url":"https://wallhaven.cc/"},{"name":"ChatGPT","url":"https://poe.com/chatgpt"}],"name":"工具"},{"list":[{"name":"HA-Net","url":"http://112.73.93.249:8123/"},{"name":"HA-Local","url":"http://192.168.31.196:8123"}],"name":"作品"}],"name":"常用"},{"group":[{"list":[{"name":"奶牛快传","url":"https://cowtransfer.com/"},{"name":"易搜","url":"https://yiso.fun/"}],"name":"效率"}],"name":"工具"}]
		};
	},
	components: {
		// DownOutlined,
	},
	methods: {

		dragstartBookmarkTitleDrag(e) {
			console.log("样式:", e.target.classList)

			var styleSheets = document.querySelector('.page_data_tools_item');
			console.log("styleSheets:", styleSheets)
			for (var i = 0; i < styleSheets.length; i++) {
				var rules = styleSheets[i].cssRules;
				console.log("rule:", rules)
				// for (var j = 0; j < rules.length; j++) {
				// 	if (rules[j].selectorText === '.button:hover') {
				// 		styleSheets[i].deleteRule(j);
				// 		break;
				// 	}
				// }
			}

			setTimeout(() => {
				e.target.classList.add('moving');
			},50)
			this.bookmarkTitleDragNode = e.target;
		},

		dragenterBookmarkTitleDrag(e) {
			e.preventDefault();
			const element = document.querySelector('.page_data_tools');
			if (e.target === this.bookmarkTitleDragNode || e.target === element) {
				return;
			}
			const children = Array.from(document.querySelector('.page_data_tools').children);
			const sourceIndex = children.indexOf(this.bookmarkTitleDragNode);
			const targetIndex = children.indexOf(e.target);

			if (sourceIndex < targetIndex) {
				element.insertBefore(this.bookmarkTitleDragNode, e.target.nextElementSibling)
			}else {
				element.insertBefore(this.bookmarkTitleDragNode, e.target)
			}
		},
		dragendBookmarkTitleDrag(e) {
			e.target.classList.remove('moving')
		},
		dragoverBookmarkTitleDrag(e) {
			e.preventDefault();
		},

		clickBookmarkPage(index) {
			this.bookmarkPage = index;
		},

		handleFocus() {
			const inputBox = document.getElementById('inputDiv');
			// inputBox.style.transform = 'scale(1.01)';
			// inputBox.style.boxShadow = '2px 2px 10px rgba(0, 0, 0, 0.3)';
			inputBox.style.border = '1.5px solid black';
			inputBox.style.transition = 'border-color 2s ease-in-out';
		},

		handleBlur() {
			const inputBox = document.getElementById('inputDiv');
			inputBox.style.removeProperty('transition');
			inputBox.style.removeProperty('box-shadow');
			inputBox.style.removeProperty('transform');
			this.selectIndex = null;
		},

		switchSearchType(type) {
			localStorage.setItem("searchPreference", type);
			this.searchPreference = type;
		},

		async searchRecommend($event) {
			if (this.searchContent && this.searchContent !== '') {
				this.recommendData = await recommendService.getBaiduRecommendData(this.searchContent, this.searchPreference);
				this.recommendShow = (this.recommendData.length !== 0);
			} else {
				// 收起推荐框
				this.recommendShow = false;
				this.selectIndex = null;
			}
		},

		clickSearchIndex(index) {
			// 收起推荐框
			let data = this.recommendData[index];
			this.recommendShow = false;
			this.selectIndex = null;
			this.searchContent = data.name;
			this.recommendData = [];

			// 页面跳转
			setTimeout(() => {
				if (data.type === 'bookmark' || data.type === 'browserBookmark' ) {
					window.open(data.url);
				}else {
					switch (this.searchPreference) {
						case "baidu":
							window.open("https://www.baidu.com/s?wd=" + this.searchContent, "_blank");
							break
						case "biying":
							window.open("https://cn.bing.com/search?q=" + this.searchContent, "_blank");
							break
						case "google":
							window.open("https://www.google.com/search?q=" + this.searchContent, "_blank");
							break
					}
				}
			}, 500);
		},
		selectSearchIndex(index) {
			this.selectIndex = index
		},

		search() {
			console.log("selectIndex = ", this.selectIndex)

			if (this.selectIndex !== null) {
				let data = this.recommendData[this.selectIndex];
				this.recommendShow = false;
				this.selectIndex = null;
				this.recommendData = [];

				// 页面跳转
				if (data.type === 'bookmark' || data.type === 'browserBookmark') {
					window.open(data.url);
				}
			}else {
				switch (this.searchPreference) {
					case "baidu":
						window.open("https://www.baidu.com/s?wd=" + this.searchContent, "_blank");
						break
					case "biying":
						window.open("https://cn.bing.com/search?q=" + this.searchContent, "_blank");
						break
					case "google":
						window.open("https://www.google.com/search?q=" + this.searchContent, "_blank");
						break
				}
			}
		}
	},
	mounted() {
		this.searchPreference = localStorage.getItem("searchPreference") || "baidu";

		// 在组件挂载后聚焦输入框
		this.$refs.myInput.focus();

		document.addEventListener('keydown', (event) => {
			// console.log("按下了:", event.key)
			// 检查按下的键是否是方向键
			if (event.key === 'ArrowUp') {
				// 阻止默认的键盘事件
				event.preventDefault();
				if (this.selectIndex == null || this.selectIndex === 0) {
					this.selectIndex = this.recommendData.length - 1;
				}else {
					this.selectIndex --;
				}
				this.searchContent = this.recommendData[this.selectIndex].name
			} else if (event.key === 'ArrowDown') {
				if (this.selectIndex == null || this.selectIndex === this.recommendData.length - 1) {
					this.selectIndex = 0;
				} else {
					this.selectIndex++;
				}
				this.searchContent = this.recommendData[this.selectIndex].name
			} else if (event.key === 'Backspace') {
				this.selectIndex = null;
			}
		});
	},
};
</script>


<style lang="scss" scoped>
* {
	//font-size: 18px;
}
.searchDiv {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
}
.searchTitle {
	margin-top: 21vh;
	position: fixed;
	display: flex;
	height: 50px;
	font-size: 36px;
	font-weight: bold;
	align-items: center;
	justify-content: center;
}
.searchContainer {
	margin-top: 30vh;
	//align-items: center;
	background-color: rgb(255, 255, 255);
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	border: 1.5px solid black;
	z-index: 999;
	//box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);

	&:not(:focus-within) {
		.recommendContainer {
			display: none;
		}
	}
}

.searchContainer:hover {

	//box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
	border: 1.5px solid black;
	//transition: border-color 2s ease-in-out;
}

.inputDiv {
	padding-left: 15px;
	display: flex;
	height: 50px;
	align-items: center;
}

.logo {
	width: 160px;
}
.search_logo {
	width: 25px;
}
.tools_logo {
	width: 28px;
	padding-bottom: 8px;
}
.search_logo_baidu_mini {
	margin-right: 5px;
}

.search_logo_google_mini {
	margin-right: 5px;
}

.search_logo_biying_mini {
	margin-right: 5px;
}

.input {
	width: 550px;
	height: 100%;
	border: none;
	outline: none;
	font-size: 17px;
	transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.border {
	height: 0;
	width: 1.3px;
	//background-color: rgb(223, 223, 223);
	background-color: #6c6c6c;
}

.micIcon {
	width: 12px;
}

.micButton {
	padding: 0 15px 0 12px;
	border: none;
	background-color: transparent;
	height: 50px;
	cursor: pointer;
	transition-duration: .3s;
}

.micButton:hover {
	//background-color: rgb(255, 230, 230);
	background-color: rgba(0, 78, 255, 0.13);
	transition-duration: .3s;
}

.searchIcon path {
	fill: rgb(114, 114, 114);
}

.micIcon path {
	fill: rgb(255, 81, 0);
}

.line {
	width: 96%;
	margin-left: 2%;
	padding-bottom: 5px;
	border-top: 1px dashed #b2b2b2;
}

.recommendContainer {
	:deep .ant-menu-item {
		margin-top: 0;
		margin-bottom: 0;
		display: flex;
		align-items: center;
		//padding-top: 8px;
		//padding-bottom: 8px;
		height: 35px;
		font-size: 16px;
		animation: expand 0.3s forwards ;

		@keyframes expand {
			from {
				height: 0px;
			}
			to {
				height:30px;
			}
		}
	}
	:deep .ant-menu-item {
		font-size: 14px;
	}
	:deep .ant-menu-item-selected {
		font-size: 14px;
		color: black;
		background-color: rgba(0, 0, 0, 0.06);
	}
}
.tools_view {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	margin-right: 20px;
	cursor: default;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.tools_view:hover {
	background-color: #e5e5e5; /* 鼠标悬停时的背景色 */
}
.toolsContainer {
	width: 700px;
	margin-top: calc(30vh + 70px);
	position: fixed;

	:deep .ant-tabs-tab-btn {
		//color: #6051a5;
	}
	:deep .ant-tabs-tab-active {
		//color: #6051a5;
	}
}

.page_data_tools {
	width: 100%;
	//margin-top: calc(30vh + 420px);
	//position: fixed;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 20px;
}
.search_text_baidu {
	font-size: 16px;
}
.tools_container_tools {
	display: flex;
	align-items: self-start;
	justify-content: left;
}
.tools_container_books {
	//border: 1px solid black;
	height: 300px;
	font-size: 14px;
}
.menu_tools_view {
	display: flex;
	flex-direction: row;
	text-align: right;
	font-size: 12px;
}
.menu_tools_view_left_sub {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 20px;
	border: 1px solid grey;
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
}
.menu_tools_view_right_sub {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 20px;
	border-right: 1px solid grey;
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
}

.bookmark_item_title {
	display: inline-block;
	margin-right: 15px;
	font-weight: bold;
	//background-color: #e1e1e1;
	color: #86340A;
	padding: 4px 10px;
	border-radius: 5px;
	cursor: pointer;
	width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	text-align: center;
}

.bookmark_item_title:hover {
	width: unset;
	min-width: 80px;
}

.bookmark_item_content {
	display: inline-block;
	margin-right: 15px;
	border-radius: 5px;
	//background-color: #f5f5f5;
	vertical-align: top;
	transition: background-color 0.2s linear;

	> a {
		display: block;
		padding: 4px 10px;
		width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		transition: width 0.3s linear;
		box-sizing: border-box;
		text-align: center;
	}
}

.bookmark_item_content:hover {
	background-color: #e1e1e1;

	> a {
		min-width: 80px;
		width: unset;
	}
}

.page_data_tools_item {
	display: inline-block;
	//background-color: #f5f5f5;
	margin-right: 10px;
	font-size: 14px;
	padding: 4px 6px;
	border-radius: 5px;
}
.page_data_tools_item:hover {
	font-size: 14px;
	background-color: #e1e1e1;
}
.page_data_tools_item.moving {
	background: transparent;
	color: transparent;
	border: 1px dashed #ccc;
}

.page_data_tools_item_select.moving {
	background: transparent;
	color: transparent;
	border-radius: 5px;
	border: 1px dashed #ccc;
}

.page_data_tools_item_select {
	display: inline-block;
	//background-color: #e1e1e1;
	margin-right: 10px;
	font-size: 14px;
	//font-weight: bold;
	padding: 4px 6px;
	//border-radius: 5px;
	border-bottom: 2px solid #86340A;
}
.page_data_tools_add {
	display: inline-block;
	background-color: #f5f5f5;
	padding: 4px 7px;
	border-radius: 30px;
}
.page_data_tools_add:hover {
	background-color: #e1e1e1;
}
.show_right {
	display: inline-block;
}

</style>
